/**************************page start*************************/
body {
    background-color: rgba(153, 153, 153, 0.3);
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei", "Open Sans", Arial, "Hiragino Sans GB", "Lantinghei SC", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
}

html, html .body-bacground {
    background-color: #f9f9f9;
}

input, textarea {
    outline: none;
    -webkit-appearance: none;
}

html, body, div, p, a, dl, dt, dd, ul, ol, li, img, h1, h2, h3, h4, h5, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    max-height: 100%;
}

pre, code, blockquote {
    font-family: "Consolas", "Courier New", monospace;
    line-height: 1.2em;
}

:not(pre)>code {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1px 3px 0;
    text-shadow: none;
    white-space: nowrap;
}

:not(a)>code {
    color: #6d180b;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
}

a {
    text-decoration: none;
    color: #333;
}

ul, li {
    list-style: none;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}

/**************************page end***************************/

/**************************common layout start***************************/
.x-layout-1 {
    width: 1%;
}

.x-layout-2 {
    width: 2%;
}

.x-layout-3 {
    width: 3%;
}

.x-layout-4 {
    width: 4%;
}

.x-layout-5 {
    width: 5%;
}

.x-layout-6 {
    width: 6%;
}

.x-layout-7 {
    width: 7%;
}

.x-layout-8 {
    width: 8%;
}

.x-layout-9 {
    width: 9%;
}

.x-layout-10 {
    width: 10%;
}

.x-layout-11 {
    width: 11%;
}

.x-layout-12 {
    width: 12%;
}

.x-layout-13 {
    width: 13%;
}

.x-layout-14 {
    width: 14%;
}

.x-layout-15 {
    width: 15%;
}

.x-layout-16 {
    width: 16%;
}

.x-layout-17 {
    width: 17%;
}

.x-layout-18 {
    width: 18%;
}

.x-layout-19 {
    width: 19%;
}

.x-layout-20 {
    width: 20%;
}

.x-layout-21 {
    width: 21%;
}

.x-layout-22 {
    width: 22%;
}

.x-layout-23 {
    width: 23%;
}

.x-layout-24 {
    width: 24%;
}

.x-layout-25 {
    width: 25%;
}

.x-layout-26 {
    width: 26%;
}

.x-layout-27 {
    width: 27%;
}

.x-layout-28 {
    width: 28%;
}

.x-layout-29 {
    width: 29%;
}

.x-layout-30 {
    width: 30%;
}

.x-layout-31 {
    width: 31%;
}

.x-layout-32 {
    width: 32%;
}

.x-layout-33-sudoku {
    width: 33%;
}

.x-layout-33 {
    width: 33.3%;
}

.x-layout-34 {
    width: 34%;
}

.x-layout-35 {
    width: 35%;
}

.x-layout-36 {
    width: 36%;
}

.x-layout-37 {
    width: 37%;
}

.x-layout-38 {
    width: 38%;
}

.x-layout-39 {
    width: 39%;
}

.x-layout-40 {
    width: 40%;
}

.x-layout-41 {
    width: 41%;
}

.x-layout-42 {
    width: 42%;
}

.x-layout-43 {
    width: 43%;
}

.x-layout-44 {
    width: 44%;
}

.x-layout-45 {
    width: 45%;
}

.x-layout-46 {
    width: 46%;
}

.x-layout-47 {
    width: 47%;
}

.x-layout-48 {
    width: 48%;
}

.x-layout-49 {
    width: 49%;
}

.x-layout-50 {
    width: 50%;
}

.x-layout-51 {
    width: 51%;
}

.x-layout-52 {
    width: 52%;
}

.x-layout-53 {
    width: 53%;
}

.x-layout-54 {
    width: 54%;
}

.x-layout-55 {
    width: 55%;
}

.x-layout-56 {
    width: 56%;
}

.x-layout-57 {
    width: 57%;
}

.x-layout-58 {
    width: 58%;
}

.x-layout-59 {
    width: 59%;
}

.x-layout-60 {
    width: 60%;
}

.x-layout-61 {
    width: 61%;
}

.x-layout-62 {
    width: 62%;
}

.x-layout-63 {
    width: 63%;
}

.x-layout-64 {
    width: 64%;
}

.x-layout-5 {
    width: 65%;
}

.x-layout-6 {
    width: 66%;
}

.x-layout-67 {
    width: 67%;
}

.x-layout-68 {
    width: 68%;
}

.x-layout-69 {
    width: 69%;
}

.x-layout-70 {
    width: 70%;
}

.x-layout-71 {
    width: 71%;
}

.x-layout-72 {
    width: 72%;
}

.x-layout-73 {
    width: 73%;
}

.x-layout-74 {
    width: 74%;
}

.x-layout-75 {
    width: 75%;
}

.x-layout-76 {
    width: 76%;
}

.x-layout-77 {
    width: 77%;
}

.x-layout-78 {
    width: 78%;
}

.x-layout-79 {
    width: 79%;
}

.x-layout-80 {
    width: 80%;
}

.x-layout-81 {
    width: 81%;
}

.x-layout-82 {
    width: 82%;
}

.x-layout-83 {
    width: 83%;
}

.x-layout-84 {
    width: 84%;
}

.x-layout-85 {
    width: 85%;
}

.x-layout-86 {
    width: 86%;
}

.x-layout-87 {
    width: 87%;
}

.x-layout-88 {
    width: 88%;
}

.x-layout-89 {
    width: 89%;
}

.x-layout-90 {
    width: 90%;
}

.x-layout-91 {
    width: 91%;
}

.x-layout-92 {
    width: 92%;
}

.x-layout-93 {
    width: 93%;
}

.x-layout-94 {
    width: 94%;
}

.x-layout-95 {
    width: 95%;
}

.x-layout-96 {
    width: 96%;
}

.x-layout-97 {
    width: 97%;
}

.x-layout-98 {
    width: 98%;
}

.x-layout-99 {
    width: 99%;
}

.x-layout-100 {
    width: 100%;
}

.x-layout-auto {
    margin: 0 auto;
}

.x-pull-right {
    float: right;
}

.x-pull-left {
    float: left;
}

.x-pc-width {
    width: 1200px;
    margin: 0 auto;
}

/**************************common layout end***************************/

/**************************common Spacing start***************************/
.x-margin-top-1 {
    margin-top: 0.1rem;
}

.x-margin-top-2 {
    margin-top: 0.2rem;
}

.x-margin-top-3 {
    margin-top: 0.3rem;
}

.x-margin-top-4 {
    margin-top: 0.4rem;
}

.x-margin-top-5 {
    margin-top: 0.5rem;
}

.x-margin-top-6 {
    margin-top: 0.6rem;
}

.x-margin-top-7 {
    margin-top: 0.7rem;
}

.x-margin-top-8 {
    margin-top: 0.8rem;
}

.x-margin-top-9 {
    margin-top: 0.9rem;
}

.x-margin-top-10 {
    margin-top: 1rem;
}

.x-margin-top-20 {
    margin-top: 2rem;
}

.x-margin-top-30 {
    margin-top: 3rem;
}

.x-margin-top-40 {
    margin-top: 4rem;
}

.x-margin-top-50 {
    margin-top: 5rem;
}

.x-margin-top-60 {
    margin-top: 6rem;
}

.x-margin-top-70 {
    margin-top: 7rem;
}

.x-margin-top-80 {
    margin-top: 8rem;
}

.x-margin-top-90 {
    margin-top: 9rem;
}

.x-margin-top-100 {
    margin-top: 10rem;
}

.x-margin-bottom-1 {
    margin-bottom: 0.1rem;
}

.x-margin-bottom-2 {
    margin-bottom: 0.2rem;
}

.x-margin-bottom-3 {
    margin-bottom: 0.3rem;
}

.x-margin-bottom-4 {
    margin-bottom: 0.4rem;
}

.x-margin-bottom-5 {
    margin-bottom: 0.5rem;
}

.x-margin-bottom-6 {
    margin-bottom: 0.6rem;
}

.x-margin-bottom-7 {
    margin-bottom: 0.7rem;
}

.x-margin-bottom-8 {
    margin-bottom: 0.8rem;
}

.x-margin-bottom-9 {
    margin-bottom: 0.9rem;
}

.x-margin-bottom-10 {
    margin-bottom: 1rem;
}

.x-margin-bottom-20 {
    margin-bottom: 2rem;
}

.x-margin-bottom-30 {
    margin-bottom: 3rem;
}

.x-margin-bottom-40 {
    margin-bottom: 4rem;
}

.x-margin-bottom-50 {
    margin-bottom: 5rem;
}

.x-margin-bottom-60 {
    margin-bottom: 6rem;
}

.x-margin-bottom-70 {
    margin-bottom: 7rem;
}

.x-margin-bottom-80 {
    margin-bottom: 8rem;
}

.x-margin-bottom-90 {
    margin-bottom: 9rem;
}

.x-margin-bottom-100 {
    margin-bottom: 10rem;
}

.x-margin-bottom-120 {
    margin-bottom: 12rem;
}

.x-padding-top-1 {
    padding-top: 0.1rem;
}

.x-padding-top-2 {
    padding-top: 0.2rem;
}

.x-padding-top-3 {
    padding-top: 0.3rem;
}

.x-padding-top-4 {
    padding-top: 0.4rem;
}

.x-padding-top-5 {
    padding-top: 0.5rem;
}

.x-padding-top-6 {
    padding-top: 0.6rem;
}

.x-padding-top-7 {
    padding-top: 0.7rem;
}

.x-padding-top-8 {
    padding-top: 0.8rem;
}

.x-padding-top-9 {
    padding-top: 0.9rem;
}

.x-padding-top-10 {
    padding-top: 1rem;
}

.x-padding-top-20 {
    padding-top: 2rem;
}

.x-padding-top-30 {
    padding-top: 3rem;
}

.x-padding-top-40 {
    padding-top: 4rem;
}

.x-padding-top-50 {
    padding-top: 5rem;
}

.x-padding-top-60 {
    padding-top: 6rem;
}

.x-padding-top-70 {
    padding-top: 7rem;
}

.x-padding-top-80 {
    padding-top: 8rem;
}

.x-padding-top-90 {
    padding-top: 9rem;
}

.x-padding-top-100 {
    padding-top: 10rem;
}

.x-padding-bottom-1 {
    margin-bottom: 0.1rem;
}

.x-padding-bottom-2 {
    margin-bottom: 0.2rem;
}

.x-padding-bottom-3 {
    padding-bottom: 0.3rem;
}

.x-padding-bottom-4 {
    padding-bottom: 0.4rem;
}

.x-padding-bottom-5 {
    padding-bottom: 0.5rem;
}

.x-padding-bottom-6 {
    padding-bottom: 0.6rem;
}

.x-padding-bottom-7 {
    padding-bottom: 0.7rem;
}

.x-padding-bottom-8 {
    padding-bottom: 0.8rem;
}

.x-padding-bottom-9 {
    padding-bottom: 0.9rem;
}

.x-padding-bottom-10 {
    padding-bottom: 1rem;
}

.x-padding-bottom-20 {
    padding-bottom: 2rem;
}

.x-padding-bottom-30 {
    padding-bottom: 3rem;
}

.x-padding-bottom-40 {
    padding-bottom: 4rem;
}

.x-padding-bottom-50 {
    padding-bottom: 5rem;
}

.x-padding-bottom-60 {
    padding-bottom: 6rem;
}

.x-padding-bottom-70 {
    padding-bottom: 7rem;
}

.x-padding-bottom-80 {
    padding-bottom: 8rem;
}

.x-padding-bottom-90 {
    padding-bottom: 9rem;
}

.x-padding-bottom-100 {
    margin-bottom: 10rem;
}

.x-margin-left-1 {
    margin-left: 1%;
}

.x-margin-left-2 {
    margin-left: 2%;
}

.x-margin-left-3 {
    margin-left: 3%;
}

.x-margin-left-4 {
    margin-left: 4%;
}

.x-margin-left-5 {
    margin-left: 5%;
}

.x-margin-left-6 {
    margin-left: 6%;
}

.x-margin-left-7 {
    margin-left: 7%;
}

.x-margin-left-8 {
    margin-left: 8%;
}

.x-margin-left-9 {
    margin-left: 9%;
}

.x-margin-left-10 {
    margin-left: 10%;
}

.x-margin-left-20 {
    margin-left: 20%;
}

.x-margin-left-30 {
    margin-left: 30%;
}

.x-margin-left-40 {
    margin-left: 40%;
}

.x-margin-left-50 {
    margin-left: 50%;
}

.x-margin-left-60 {
    margin-left: 60%;
}

.x-margin-left-70 {
    margin-left: 70%;
}

.x-margin-left-80 {
    margin-left: 80%;
}

.x-margin-left-90 {
    margin-left: 90%;
}

.x-margin-left-100 {
    margin-left: 100%;
}

.x-margin-right-1 {
    margin-right: 1%;
}

.x-margin-right-2 {
    margin-right: 2%;
}

.x-margin-right-3 {
    margin-right: 3%;
}

.x-margin-right-4 {
    margin-right: 4%;
}

.x-margin-right-5 {
    margin-right: 5%;
}

.x-margin-right-6 {
    margin-right: 6%;
}

.x-margin-right-7 {
    margin-right: 7%;
}

.x-margin-right-8 {
    margin-right: 8%;
}

.x-margin-right-9 {
    margin-right: 9%;
}

.x-margin-right-10 {
    margin-right: 10%;
}

.x-margin-right-20 {
    margin-right: 20%;
}

.x-margin-right-30 {
    margin-right: 30%;
}

.x-margin-right-40 {
    margin-right: 40%;
}

.x-margin-left-50 {
    margin-right: 50%;
}

.x-margin-right-60 {
    margin-right: 60%;
}

.x-margin-right-70 {
    margin-right: 70%;
}

.x-margin-right-80 {
    margin-right: 80%;
}

.x-margin-right-90 {
    margin-right: 90%;
}

.x-margin-left-100 {
    margin-left: 100%;
}

.x-padding-left-1 {
    padding-left: 1%;
}

.x-padding-left-2 {
    padding-left: 2%;
}

.x-padding-left-3 {
    padding-left: 3%;
}

.x-padding-left-4 {
    padding-left: 4%;
}

.x-padding-left-5 {
    padding-left: 5%;
}

.x-padding-left-6 {
    padding-left: 6%;
}

.x-padding-left-7 {
    padding-left: 7%;
}

.x-padding-left-8 {
    padding-left: 8%;
}

.x-padding-left-9 {
    padding-left: 9%;
}

.x-padding-left-10 {
    padding-left: 10%;
}

.x-padding-left-20 {
    padding-left: 20%;
}

.x-padding-left-30 {
    padding-left: 30%;
}

.x-padding-left-40 {
    padding-left: 40%;
}

.x-padding-left-50 {
    padding-left: 50%;
}

.x-padding-left-60 {
    padding-left: 60%;
}

.x-padding-left-70 {
    padding-left: 70%;
}

.x-padding-left-80 {
    padding-left: 80%;
}

.x-padding-left-90 {
    padding-left: 90%;
}

.x-padding-left-100 {
    padding-left: 100%;
}

.x-padding-right-1 {
    padding-right: 1%;
}

.x-padding-right-2 {
    padding-right: 2%;
}

.x-padding-right-3 {
    padding-right: 3%;
}

.x-padding-right-4 {
    padding-right: 4%;
}

.x-padding-right-5 {
    padding-right: 5%;
}

.x-padding-right-6 {
    padding-right: 6%;
}

.x-padding-right-7 {
    padding-right: 7%;
}

.x-padding-right-8 {
    padding-right: 8%;
}

.x-padding-right-9 {
    padding-right: 9%;
}

.x-padding-right-10 {
    padding-right: 10%;
}

.x-padding-right-20 {
    padding-right: 20%;
}

.x-padding-right-30 {
    padding-right: 30%;
}

.x-padding-right-40 {
    padding-right: 40%;
}

.x-padding-left-50 {
    padding-right: 50%;
}

.x-padding-right-60 {
    padding-right: 60%;
}

.x-padding-right-70 {
    padding-right: 70%;
}

.x-padding-right-80 {
    padding-right: 80%;
}

.x-padding-right-90 {
    padding-right: 90%;
}

.x-padding-left-100 {
    padding-left: 100%;
}

.x-padding-left-rem1 {
    padding-left: 1rem;
}

.x-padding-right-rem1 {
    padding-right: 1rem;
}

.x-padding-left-rem2 {
    padding-left: 2rem;
}

.x-padding-right-rem2 {
    padding-right: 2rem;
}

.x-padding-10 {
    padding: 1rem;
}

.x-padding-5 {
    padding: 0.5rem;
}

.x-info-padding p {
    padding-right: 1rem;
}

.x-white-box {
    background: #fff;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid #ededed;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.x-box-title {
    font-size: 1.2rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #ededed;
    position: relative;
}

.x-box-summary {
    font-size: 1rem;
    padding-bottom: 1rem;
    color: #999;
}

.x-box-tags {
    width: 100%;
    overflow: hidden;
    height: 2rem;
    line-height: 2rem;
}

.x-box-tags p {
    float: left;
    font-size: 0.8rem;
    color: #999;
    padding-right: 1rem;
    color: #999;
}

.x-box-tags a {
    color: #999;
}

/**************************common Spacing end***************************/

.x-item-space-1 {
    height: 1rem;
}

.x-item-space-25 {
    height: 25px;
}

.x-item-space-40 {
    height: 40px;
}

.x-item-space-50 {
    height: 50px;
}

.x-item-space-56 {
    height: 56px;
}

.x-item-space-2 {
    height: 2rem;
}

.x-item-space-3 {
    height: 3rem;
}

.x-item-space-4 {
    height: 4rem;
}

.x-item-lh-4 {
    line-height: 4rem;
}

.x-item-space-5 {
    height: 5rem;
}

.x-item-space-6 {
    height: 6rem;
}

.x-item-lh-6 {
    line-height: 6rem;
}

.x-item-space-8 {
    height: 8rem;
}

.x-item-lh-8 {
    line-height: 8rem;
}

/**************************common fonts elements start***************************/
.x-font-subtitle {
    font-size: 0.8rem;
    color: #999;
}

.x-font-small {
    font-size: 0.8rem;
}

.x-font-body {
    font-size: 1rem;
}

.x-font-title12 {
    font-size: 1.2rem;
}

.x-font-title14 {
    font-size: 1.4rem;
}

.x-font-title16 {
    font-size: 1.6rem;
}

.x-font-title18 {
    font-size: 1.8rem;
}

.x-font-title24 {
    font-size: 2.4rem;
}

.x-font-grey {
    color: #999;
}

.x-font-grey5 {
    color: #555;
}

.x-font-blue {
    color: #0199df;
}

.x-font-normalcolor {
    color: #333;
}

.x-font-darkgray {
    color: #2a2a2a;
}

.x-font-white {
    color: #fff;
}

.x-font-left {
    text-align: left;
}

.x-font-center {
    text-align: center;
}

.x-font-right {
    text-align: right;
}

.x-font-verticla {
    vertical-align: text-top;
}

/**************************cut-off rule***************************/
.x-hr {
    height: 1px;
    width: 100%;
    background: #ededed;
    margin: 0.5rem auto;
}

/**************************buttons***************************/
.x-button-default {
    background-color: #e6e6e6;
    color: #333;
}

.x-button-primary {
    background-color: #0e90d2;
    color: #fff;
    padding: 0.6rem 2rem;
    border-radius: 2px;
    font-size: 1rem;
}

.x-button-secondary {
    background-color: #3bb4f2;
    color: #fff;
}

.x-button-success {
    background-color: #5eb95e;
    color: #fff;
}

.x-button-warning {
    background-color: #f37b1d;
    color: #fff;
}

.x-button-danger {
    background-color: #dd514c;
    color: #fff;
}

.x-btn-link {
    background: none;
    color: #0e90d2;
}

.x-btn-radius {
    border-radius: 1rem;
}

.x-div-radius {
    border-radius: 4px;
}

.x-border-none {
    border: none;
}

.x-border-darkgrey {
    border: 1px solid #777777;
}

.x-border-white {
    border: 1px solid #fff;
}

.x-border-grey {
    border: 1px solid #e6e6e6;
}

.x-background-blue {
    background-color: #3c88d7;
}

.x-background-whiteblue {
    background-color: #19b5fe;
}

.x-background-white {
    background-color: #fff;
}

.x-button-radus:hover {
    background-color: #009fe8;
    color: #fff;
    border: #009fe8;
}

.x-button-radus02:hover {
    background-color: #009fe8;
    color: #fff;
    border: #009fe8;
}

.x-image-radus {
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.lable-weight {
    border: 1px solid #019be2;
    background-color: #fff;
    color: #019be2;
}

a.lable-weight:hover {
    background-color: #019be2;
    color: #fff;
}

.app-title {
    width: 90%;
    height: 3rem;
    line-height: 3rem;
    background-color: #171616;
    padding: 0 5%;
}

.block-a {
    display: block;
    width: 100%;
    height: 100%;
}

.border-line {
    width: 100%;
    height: 1px;
    background-color: #ededed;
    margin: 0.5rem auto;
}

.comment-fixed-frame {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 3rem;
    background-color: #f5f5f5;
    border-top: 1px solid #ededed;
    line-height: 3rem;
    padding: 0 5%;
}

.view-position {
    position: absolute;
    left: 80%;
    top: 0;
}

.comment-input {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    height: 2rem;
    border-radius: 1rem;
    padding: 0 5%;
}

.portrait-size {
    width: 2.6em;
    vertical-align: middle;
}

.x-icon-size {
    width: 2rem;
    vertical-align: middle;
}

.footer {
    background-color: #fff;
    padding: 3rem 0;
    color: #666666;
    text-align: center;

    margin: 0 auto;
}

/**************************common elements end***************************/

/**************************modules end*************************/
.fans-part {
    border-bottom: 1px solid #ededed;
}

.x-part-border-top {
    border-top: 1px solid #ededed;
}

.x-part-border-bottom {
    border-bottom: 1px solid #ededed;
}

.x-part-border-right {
    border-right: 1px solid #ededed;
}

.x-part-border-left {
    border-left: 1px solid #ededed;
}

.clearfix {
    overflow: hidden;
}

.x-box-border {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.x-li-heigth {
    height: 3rem;
    line-height: 3rem;
}

.x-li-heigth-2 {
    height: 2rem;
    line-height: 2rem;
}

.x-header-top-black {
    height: 2rem;
    line-height: 2rem;
    background-color: #404144;
}

.x-logo-height {
    height: 4rem;
    line-height: 4rem;
}

.banner-bg img {
    width: 100%;
}

.x-full-image {
    width: 100%;
    height: 100%;
}

.x-a-active {
    color: #333;
}

a.x-a-active:hover {
    color: #19b5fe;
}

.x-a-border {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #19b5fe;
    position: absolute;
    bottom: 0;
    left: 0;
}

.x-title-border {
    height: 2px;
    width: 4rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #19b5fe;
}

.x-vertical-middle {
    vertical-align: middle;
}

.x-small-avatar {
    width: 1.6rem;
}

.x-textarea {
    width: 100%;
    height: 100%;
}

.x-image-size-11 {
    min-height: 11rem;
}

/*page*/
.x-page {
    width: 100%;
    overflow: hidden;
}

.x-page > li {
    float: left;
    margin-right: 0.2rem;
}

.x-page > li a {
    display: block;
    padding: 0.5rem 1rem;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
}

.x-page > li a:hover {
    background-color: #19b5fe;
    border-color: #19b5fe;
    color: #fff;
}

/*page*/
.x-abolute-submit {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2.7rem;
    background-color: #000;
    color: #fff;
    padding: 0.2rem 3%;
    filter: alpha(Opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
    overflow: hidden;
}

.x-abolute-submit p {
    line-height: 1.2rem;
    font-size: 0.9rem;
    text-overflow: ellipsis;
}

/*x-tag*/
.x-tag {
    width: 100%;
    overflow: hidden;
    height: auto;
}

.x-tag > li {
    float: left;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.x-tag > li a {
    display: block;
    padding: 0.2rem 0.5rem;
    background-color: #fff;
    border: 1px solid #ddd;
    font-size: 0.8rem;
    color: #8e8e8e;
}

.x-tag > li a:hover {
    background-color: #19b5fe;
    border-color: #19b5fe;
    color: #fff;
}

/*x-tag*/
/*x-link*/
.x-link {
    width: 100%;
    overflow: hidden;
}

.x-link > li {
    float: left;
    margin-right: 0.5rem;
}

.x-link > li a {
    display: block;
    padding: 0.2rem 0.2rem;
    background-color: #fff;
    font-size: 0.8rem;
    color: #8e8e8e;
}

.x-link > li a:hover {
    color: #19b5fe;
}

/*x-link*/
.x-search-icon {
    position: absolute;
    right: 1rem;
    top: 0.8rem;
    color: #999;
}

.x-rss-btn {
    position: absolute;
    right: 0;
    top: 1rem;
    color: #fff;
    height: 2rem;
    line-height: 2rem;
    width: 4rem;
    text-align: center;
}

.banner-left {
    height: 260px;
    overflow: hidden;
}

.banner-left img {
    width: 100%;
}

.banner-right p {
    height: 125px;
    overflow: hidden;
    margin-bottom: 10px;
}

.banner-right img {
    width: 100%;
    height: 100%;
}

.x-layout-33-like {
    width: 33.3%;
}

.x-layout-33-like-image {
    height: 10rem;
    overflow: hidden;
}

.x-layout-33-like-image img {
    height: 100%;
}

.x-layout-33-sudoku {
    height: 10rem;
    overflow: hidden;
}

.x-layout-33-sudoku img {
    width: 100%;
    height: 100%;
}

.x-details-content p {
    line-height: 1.8rem;
    margin-bottom: 1rem;
    width: 100%;
}

.x-details-content img {
    /*max-width: 100%;*/
}

.x-details-content blockquote {
    color: #000;
    background: #efefef;
    border-left: 3px solid #21bb74;
    margin: 15px 10px;
    padding: 15px 25px;
}

.x-details-content a {
    color: #46B;
}

.x-details-content a:HOVER {
    color: #bb3030;
}

.comment a {
    color: #0a44ff;
}

.comment a:HOVER {
    color: #bb3030;
}

.reward-content {
    margin-top: 4rem;
    text-align: center;
}

.reward-content p {
    line-height: 1rem;
}

.reward-content img {
    max-width: 10rem;
    border: 1px solid #e4e4e4;
}

.x-item-border {
    border: 1px solid #ededed;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

}

.right-box-title {
    font-size: 1rem;
    /*height: 60px;*/
    height: auto;
    overflow: hidden;
    color: #555;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

a.right-box-title:hover {
    color: #19b5fe;
}

.right-box-title a:hover {
    color: #19b5fe;
}

.image-box {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.sub-image-box {
    position: relative;
    overflow: hidden;
    height: 48%;
    margin-bottom: 1%;
}

.image-box p {
}

.image-box div {
}

.image-box img {
    max-width: 100%;
}

.jblog-nav {

    margin: 0 auto;
    background: #fff;
    border-bottom: 1px solid #ededed;
}

.jblog-nav-content {

    margin: 0 auto;
    overflow: hidden;
    height: 4rem;
    line-height: 4rem;
}

.jblog-nav-content ul {
    float: left;
    width: 100%;
    overflow: hidden;
}

.jblog-nav-content ul li {
    float: left;
    text-align: center;
    margin-right: 2rem;

}

.jblog-nav-content ul li a {
    color: #2a2a2a;
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
    position: relative;
    padding: 0 0.3rem;

}

.jblog-nav-content ul li a:hover {
    color: #19b5fe;
}

.jblog-rss-content {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.jblog-rss-content input {
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    padding-left: 5%;
    padding-right: 20%;
    border: 1px solid #e6e6e6;
    background-color: #f9f9f9;
}

/* login*/
.login-box {
    padding: 0.5rem 0;
}

.login-box a {
    color: #367fa9;
}

.login-box input {
    border: 1px solid #d2d6de;
    padding: 0.3rem 0.5rem;
    width: 40%;
}

.login-box-title {
    text-align: right;
}

.login-button-box {
    padding-left: 20%;
    padding-top: 1rem;
}

.login-button-box img {
    max-width: 1.4rem;
    vertical-align: middle;
}

.jblog-captcha {
    padding-left: 20%;
    padding-top: 1rem;
}

.login-button-box input {
    background-color: #367fa9;
    color: #fff;
    border: 1px solid #204d74;
    padding: 0.2rem 1.5rem;
    font-size: 1rem;
}

.login-button-box a {
    font-size: 0.8rem;
    padding-left: 0.5rem;
}

.login-button-box a:hover, .login-box a:hover {
    text-decoration: underline;
}

.jblog-link {

    margin: 0 auto;
    background-color: #fff;
    border-bottom: 1px solid #ededed;
}

.jblog-link-content {

    margin: 0 auto;
    height: 3rem;
    line-height: 3rem;
}

.jblog-link-content ul {
    float: left;
    width: 50%;
    overflow: hidden;
}

.jblog-link-content-right li {
    float: right;
    border-right: 1px solid #ededed;
}

.jblog-link-content-right li a {
    color: #999;
    padding-left: 1rem;
    padding-right: 1rem;
}

.jblog-link-content-right li a:hover {
    color: #19b5fe;
}

.jblog-link-content-left li {
    float: left;
    border-right: 1px solid #ededed;
}

.jblog-link-content-left li a {
    color: #999;
    font-size: 0.8rem;
}

.jblog-link-content .website-logo {
    width: 13rem;
    border-right: none;
    height: 3rem;
}

.jblog-link-content .website-logo img {
    width: 2rem;
    height: 2rem;
    margin: 8px 0 8px 8px;
}

.jblog-link-content .website-logo span {
    font-size: 18px;
    vertical-align: top
}

.jblog-link-logo {
    /*border-bottom: 1px solid #ededed;*/
}

.jblog-link-logo-content {
    margin: 0 auto;
    background-color: #fff;
    /*overflow: hidden;*/
    height: 20rem;
    line-height: 6rem;
}

.jblog-link-logo-image {
    font-size: 2.0rem;
    /*position: absolute;*/
    /*top: 10%;*/
    /*right: 50%;*/
}

.jblog-link-logo-adv {
    width: 100%;
    /*float: left;*/
}

.jblog-link-logo-adv img {
    width: 100%;
    height: 100%;
}

.yfh-banner-transfer {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: all .3s ease;
    background: -webkit-gradient(linear, 0 30%, 0 100%, from(rgba(0, 0, 0, 0)), to(#121515));
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #121515);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #121515);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), #121515);
    cursor: pointer;
}

.yfh-banner-transfer p {
    position: absolute;
    bottom: 0.5rem;
    color: #fff;
    font-size: 1rem;
    margin: 0 0.5rem;
}

.yfh-banner-transfer a {
    display: block;
    width: 100%;
    height: 100%;
}

.yfh-banner-image img {
    cursor: pointer;
    transition: all 0.6s;
    width: 100%;
    height: 100%;

}

.image-box:hover img {
    transform: scale(1.1);
}

.sub-image-box:hover img {
    transform: scale(1.1);
}

.aritcle h1 {
    font-size: 2rem;
    font-weight: 500;
    padding: 1rem 0;
}

.aritcle h2 {
    font-size: 1.8rem;
    font-weight: 500;
    padding: 1rem 0;
}

.aritcle h3 {
    font-size: 1.6rem;
    font-weight: bold;
    padding: 1rem 0;
}

.aritcle h4 {
    font-size: 1.4rem;
    font-weight: bold;
    padding: 1rem 0;
}

.aritcle h5 {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 1rem 0;

}

.aritcle h6 {
    font-size: 1rem;
    font-weight: bold;
    padding: 1rem 0;
}

.aritcle {
    padding: 0.5rem;
}

.aritcle p {
    line-height: 1.8rem;
    color: #666;
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: normal;
}

.aritcle ul li {
    line-height: 1.4rem;
    font-size: 1rem;
    font-weight: normal;
    margin: 1rem 1rem 0.5rem 2rem;
    list-style: disc;
    color: #666;
}

.aritcle ul li ul li {
    list-style: circle;
    margin-left: 2rem;
}

.x-page .disabled {
    color: #999;
    cursor: not-allowed;
}

.x-page li.disabled a {
    color: #999;
    cursor: not-allowed;
}

.x-page li.disabled a:hover {
    background-color: #fff;
    border: 1px solid #ddd;
}

.x-page > li.active a {
    background-color: #19b5fe;
    border-color: #19b5fe;
    color: #fff;
}

.jblog-comment-replay {
    border: 1px solid #ddd;
    background-color: #ffe;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 14px;
    color: #757575;
}

.jblog-comment-replay h4 {
    padding: 2px 0px 3px 0px;
    color: #1E50A2;
    font-size: 9pt;
    font-weight: normal;
}

.login-box-title {
    text-align: right;
    vertical-align: middle;
    padding: 0.5rem;
}
.login-box input {
    border: 1px solid #d2d6de;
    padding: 0.7rem 0.5rem;
    width: 80%;
}
.toc {
    background: #eee;
    float: right;
    margin-left: 10px;
    margin-bottom:10px;
    padding: 10px;
}

.toc .toc-title {
    margin: 10px;
}

.toc .toc-content {
    margin: 10px;
    font-size: 0.8em;
    line-height:20px;
}

pre {
    position: relative;
    background: #3f3f3f;
}
code {

}
code.has-numbering {
    margin-left: 35px;
}
.pre-numbering {
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    background-color: #3f3f3f;
    text-align: right;
    color: #ffffff;
    padding:0.5em;
}
ul.pre-numbering > li {
    list-style: none;
    margin:0;
    line-height: 1.2rem;
    font-size: 1rem;
    font-weight: normal;
}

@media all and (max-width: 1200px) {
    .x-pc-width {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .blog-body .blog-sm-left {
        width: 100%;
        float: none;
    }

    .blog-sm-right {
        display: none;
    }

    .x-sm-logo {
        width: 100%;
        float: none;
        padding-left: 1rem;
    }

    .jblog-nav-content li {
        width: auto;
        margin-right: 1rem;
        margin-left: 1rem;
    }

    .jblog-link-logo-image {
        width: auto;
        float: none;
        font-size: 2rem;
    }

    .jblog-nav-content ul li a {
        padding: 0 0.1rem;
    }

    .jblog-link-logo-adv {
        /*display: none;*/
    }

    .jblog-link-content, .jblog-nav-content {
        width: 100%;
    }

    .jblog-link-logo-content {
        /*padding-left: 1rem;*/
        /*width: 95%;*/
        height: auto;
        line-height: 0;
    }

    .x-box-tags p {
        width: 25%;
    }

    .x-sm-footer {
        padding-left: 2%;
        padding-right: 2%;
        font-size: 12px;
    }

    .x-sm-image {
        max-width: 100%;
        height: auto;
    }

    .x-sm-eye, .x-box-tags p {
        display: none;
    }

    .x-sm-image3 p {
        padding: 1%;
    }

    .x-layout-33-sudoku {
        height: 5rem;
    }

    .x-sm-item {
        border-radius: 0;
        padding: 10px;
    }
}

@media all and (max-width: 640px) {
    .x-sm-like {
        float: none;
        width: 100%;
    }

    .x-sm-banner-left {
        float: none;
        width: 100%;
        height: 140px;
    }

    .image-box {
        float: none;
        width: 100%;
        height: 140px;
    }

    .x-sm-banner-right {
        display: none;
    }

    .jblog-nav-content {
        margin: 0 auto;
        overflow: hidden;
        line-height: 3rem;
        height: auto;
    }

    .jblog-nav-content ul li {
        float: none;
        margin-right: 0.4rem;
        text-align: center;
    }

    .jblog-nav-content ul li a {
        font-size: 0.9rem;
        padding: 0 0.1rem;

    }

    .x-sm-item-display {
        display: none;
    }

    .x-sm-logo-height {
        height: 3rem;
        line-height: 3rem;
    }

    .login-box input {
        width: 80%;
    }

    .login-tip {
        display: block;
    }

    .jblog-link-logo-content {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
        height: auto;
        /*line-height: 6rem;*/
    }

    .jblog-link-logo-image {
        /*position: inherit;*/
    }

    /* 响应式图片 */
    p {
        overflow-x: scroll;
    }

    .jblog-link-logo-adv {
        display: none;
    }

    .jblog-link-content .display{
        display: none;
    }

    .toc {
        float: left;
        width: 100%;
        margin-left: 0;
        padding: 0;
    }

    img {
        max-width: none;
        max-height: none;
    }
}

@media all and (max-width: 320px) {
    .izxy-person-absolute {
        position: absolute;
        left: 0;
        top: 40%;
    }

    /* 响应式图片 */
    p {
        overflow-x: scroll;
    }
}